<template>
  <div class="app_container">
    <appHeader />
    <div class="container">
      <div class="home">
        <main class="main">
          <div class="game-title">请选择要充值的游戏</div>
          <ul class="game-list">
            <li v-for="item in gameList" :key="item.id" class="game-item" @click="openCZinfo(item)">
              <img :src="`${baseUrl}${item.imgUrl}`" alt="">
              <div class="game-name">{{ item.gameName }}</div>
            </li>
          </ul>
        </main>
        <div style="color: rgb(102, 102, 102); margin-top: 20px; font-size: 12px;">
          <p>提示：</p>
          <p>1. 本产品只能提供苹果区账号进行充值，安卓暂不支持</p>
          <p>2. 请玩家根据购买的兑换码选择对应的游戏进行充值</p>
          <p>3. 和平的兑换码无法兑换王者, 反之同理</p>
          <p>4. 本平台兑换时间为: 早上9:00-晚上23:00, 非此期间内不可兑换</p>
          <p>5. 重要: 兑换码有效期为【2个小时】, 超过2小时后兑换码不可兑换!!!</p>
        </div></div>
    </div>
  </div>
</template>

<script>
import appHeader from './components/appHeader.vue'
import { postAction } from '@/api/manage'
export default {
  components: {
    appHeader
  },
  mixins: [],
  props: {},
  data() {
    return {
      gameList: []
    }
  },
  computed: {
    baseUrl() {
      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
        return ''
      } else {
        return 'http://124.223.214.5:199'
      }
    }
  },
  watch: {},
  created() {
    this.getConfigInfo()
  },
  mounted() {},
  methods: {
    openCZinfo(item) {
      this.$store.commit('index/SET_gameInfo', item)
      this.$router.push('/prepareTopup')
    },
    // 获取展示页配置
    getConfigInfo() {
      this.$store.dispatch('app/setLoading', true)
      postAction('script/gameList.aspx?action=getGamneList', {}).then(res => {
        if (res.code === 1) {
          this.gameList = res.data || []
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).catch(res => {
        this.$message.error(res.message || '操作失败！')
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.app_container{
  width: 100%;
  // height: 100%;
  background-image: url('../assets/home_bg.png');
  background-size: cover;
}
.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .home{
    width: 100%;
    max-width: 800px;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 10px;
    .main{
      width: 100%;
      background-color: #fff3;
      // background-filter: blur(20px);
      padding: 10px;
      color: #666;
      box-sizing: border-box;
      border-radius: 10px;
      margin-top: 50px;
      .game-title{
        color: #409eff;
        font-size: 16px;
        font-weight: 700;
      }
      .game-list{
        margin-top: 20px;
        margin-left: 20px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        .game-item{
          margin-right: 20px;
          margin-bottom: 20px;
          width: 100px;
          img{
            height: 100px;
            width: 100px;
            border-radius: 20px;
          }
          .game-name{
            text-align: center;
          }
        }
      }
    }
  }
}
</style>>